<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('user-activity.title')}} </h2>
            <cly-tooltip-icon :tooltip="i18n('user-activity.description')" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"></cly-tooltip-icon>
        </template>
    </cly-header>
    <cly-main>
        <cly-qb-bar feature="core" v-if="showDrillFilter" class="bu-mb-5" v-model="userActivityFilters" queryStore="user-activity" format="mongo" style="margin-bottom:32px" :propertySourceConfig="{'wrappedUserProperties': false}"></cly-qb-bar>
        <cly-section>
            <cly-chart-bar :option="userActivityOptions" :height="400" v-loading="isLoading" :force-loading="isLoading"></cly-chart-bar>
        </cly-section>
        <cly-section>
            <cly-datatable-n  :rows="userActivityRows" :exportFormat="formatExportFunction" :resizable="true" :force-loading="isLoading">
                <template v-slot="scope">
                    <el-table-column sortable="custom" prop="bucket" :label="i18n('user-activity.table-session-count')">
                        <template slot-scope="scope">
                            <div class="bu-columns bu-is-gapless">
                                <div class="bu-column bu-is-2">
                                    <span>{{scope.row.bucket}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="all" :label="i18n('user-activity.table-all-users')">
                        <template slot-scope="scope">
                            <div class="bu-level">
                                <div class="bu-is-flex user-activity-table__data-item-container">
                                    <div class="bu-level bu-is-justify-content-flex-start">
                                        <span>{{formatNumber(scope.row.all)}}</span>
                                    </div>
                                    <div class="bu-is-flex user-activity-table__divider">
                                        <span>|</span>
                                    </div>
                                    <div class="bu-level bu-is-justify-content-flex-end">
                                        <span>{{formatPercentage(scope.row.all/seriesTotal.all)}}%</span>
                                    </div>
                                </div>
                                <cly-progress-bar :percentage="formatPercentage(scope.row.all/seriesTotal.all)" :color="progressBarColor"> </cly-progress-bar>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="thirtyDays" :label="i18n('user-activity.table-thirty-days')">
                        <template slot-scope="scope">
                            <div class="bu-level">
                                <div class="bu-is-flex user-activity-table__data-item-container">
                                    <div class="bu-level bu-is-justify-content-flex-start">
                                        <span>{{formatNumber(scope.row.thirtyDays)}}</span>
                                    </div>
                                    <div class="bu-level user-activity-table__divider ">
                                        <span>|</span>
                                    </div>
                                    <div class="bu-level bu-is-justify-content-flex-end">
                                        <span>{{formatPercentage(scope.row.thirtyDays/seriesTotal.thirtyDays)}}%</span>
                                    </div>
                                </div>
                                <cly-progress-bar :percentage="formatPercentage(scope.row.thirtyDays/seriesTotal.thirtyDays)" :color="progressBarColor"> </cly-progress-bar>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="sevenDays" :label="i18n('user-activity.table-seven-days')">
                        <template slot-scope="scope">
                                <div class="bu-level">
                                    <div class="bu-is-flex user-activity-table__data-item-container">
                                        <div class="bu-level bu-is-justify-content-flex-start">
                                            <span>{{formatNumber(scope.row.sevenDays)}}</span>
                                        </div>
                                        <div class="bu-level user-activity-table__divider">
                                            <span>|</span>
                                        </div>
                                        <div class="bu-level bu-is-justify-content-flex-end">
                                            <span>{{formatPercentage(scope.row.sevenDays/seriesTotal.sevenDays)}}%</span>
                                        </div>
                                    </div>
                                    <cly-progress-bar :percentage="formatPercentage(scope.row.sevenDays/seriesTotal.sevenDays)" :color="progressBarColor"> </cly-progress-bar>
                                </div>
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>        
    </cly-main>
</div>
